<template>
	<view>
		<uni-section title="基础信息" type="line" style="color: #409EFF;"></uni-section>
		<uni-list style="width:95%">
			<uni-list-item title="申请人" />
			<uni-list-item :thumb="reim_data.employee.avatar" thumbSize="lg" :rightText="reim_data.employee.realName == '' || reim_data.employee.realName == null ? reim_data.employee.nickName : reim_data.employee.realName" />
			<uni-list-item title="申请时间" :rightText="reim_data.reimbursement.createTime" />
			<uni-list-item title="主题" :rightText="reim_data.reimbursement.title" />
			<uni-list-item title="费用" :rightText="reim_data.reimbursement.cost" />
		</uni-list>
		<uni-section title="详细信息" type="line" style="color: #409EFF;"></uni-section>
		<uni-list style="width:95%;margin-bottom: 50rpx;" >
			<uni-list-item title="发票或收据" :rightText="'共' + reim_data.billImgList.length + '张'" />
			<uni-file-picker id="img-box" v-if="reim_data.billImgList.length > 0"
			title="照片最多显示9张" 
			v-model="reim_data.billImgList"
			:image-styles="imgStyle"
			return-type="array"
			:del-icon="false"
			:disabled="true"
			mode="grid"/>
			<uni-list-item title="所在团队" :rightText="reim_data.teamName" />
			<uni-list-item title="费用说明"/>
			<text style="font-size: 14px; color: #3b4144;margin-left: 30rpx;">{{ reim_data.reimbursement.note }}</text>
		</uni-list>
		<uni-section title="审核" type="line" style="color: #409EFF;"></uni-section>
		<uni-list>
			<uni-list-item v-if="reim_data.reimbursement.auditReimStatus == 'UNAUDIT'" rightText="待提交"/>
			<uni-list-item v-if="reim_data.reimbursement.auditReimStatus == 'AUDITING'" :thumb="reim_data.auditor == null ? '' : reim_data.auditor.avatar" thumbSize="lg" :title="reim_data.auditor == null ? '审核员工' : reim_data.auditor.realName == null || reim_data.auditor.realName == '' ? reim_data.auditor.nickName : reim_data.auditor.realName" rightText="审核中" />
			<uni-list-item v-if="reim_data.reimbursement.auditReimStatus == 'REFUSED'" :thumb="reim_data.auditor == null ? '' : reim_data.auditor.avatar" thumbSize="lg" :title="reim_data.auditor == null ? '审核员工' : reim_data.auditor.realName == null || reim_data.auditor.realName == '' ? reim_data.auditor.nickName : reim_data.auditor.realName" rightText="已驳回" />
			<uni-list-item v-if="reim_data.reimbursement.auditReimStatus == 'AGREED'" :thumb="reim_data.auditor == null ? '' : reim_data.auditor.avatar" thumbSize="lg" :title="reim_data.auditor == null ? '审核员工' : reim_data.auditor.realName == null || reim_data.auditor.realName == '' ? reim_data.auditor.nickName : reim_data.auditor.realName" rightText="已通过" />
		</uni-list>
		<view style="text-align: center;" v-if="employee.duty == 'AUDITOR' && reim_data.reimbursement.auditReimStatus == 'AUDITING' && (Number(reim_data.reimbursement.auditLevel) + 1) == employee.auditLevel">
		<!-- <view style = "text-align: center;"> -->
			<button type="default" size="mini" style="background-color: #007AFF;color: #fff;" @click="audit('AGREE')">同意</button>
			<button type="warn" size="mini" style="color: #fff;margin-left: 15px;margin-right: 0;" @click="audit('REFUSED')">不同意</button>
		</view>
		<uni-section title="核销" type="line" style="color: #409EFF;"></uni-section>
		<uni-list v-if="reim_data.reimbursement.auditReimStatus == 'DONE'">
		<!-- <uni-list> -->
			<uni-list-item :thumb="reim_data.reimer == null ? '' : reim_data.reimer.avatar" thumbSize="lg" :title="reim_data.reimer == null ? '财务人员' : reim_data.reimer.realName == null || reim_data.reimer.realName == '' ? reim_data.reimer.nickName : reim_data.reimer.realName" rightText="已核销" />
			<uni-file-picker id="img-box"
			title="转账凭证" 
			v-value="certify"
			:image-styles="imgStyle"
			return-type="object"
			:del-icon="false"
			:disabled="true"
			mode="grid"/>
		</uni-list>
		<view style="text-align: center; margin: 50rpx auto;" v-if="employee.duty == 'REIMBURSEMENT' && reim_data.reimbursement.auditReimStatus == 'AGREED'">
		<!-- <view style="text-align: center; margin: 50rpx auto;"> -->
			<button type="default" size="mini" style="background-color: #007AFF;color: #fff; margin-right: 0;" @click="verify">核销</button>
		</view>
		<xy-dialog
		:title="auditOrReim.type == 'AUDIT' ? '审批意见' : '上传转账凭证图片'" 
		:show.sync="showDialog"
		@cancelButton="clickCancel"
		@confirmButton="clickConfirm">
			<view style="padding: 0 30rpx 30rpx;">
				<uni-forms ref="baseForm">
					<uni-forms-item v-if="auditOrReim.type == 'AUDIT'" label-align="right" label="审批意见:">
						<uni-easyinput type="textarea" v-model="reim_data.reimbursement.auditNote" placeholder="审批意见" />
					</uni-forms-item>
					<uni-forms-item v-if="auditOrReim.type == 'REIM'" label-align="right" label="图片:">
						<robby-image-upload v-model="certify"
						@delete="deleteImage" 
						limit="1"
						@add="addImage"></robby-image-upload>
					</uni-forms-item>
				</uni-forms>
				<button id="submit-button" type="default" :plain="true" @click="submit"></button>
			</view>
		</xy-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reim_data: [],
				certify: [],
				user: [],
				employee: [],
				showDialog: false,
				imageList: [],
				fileList: [],
				images: [],
				delId: [],
				fileIds: [],
				isEdit: false,
				isClickUpload: false,
				imgStyle: {
					"height": 100,   // 边框高度
					"width": 100,    // 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#eee",     // 边框颜色
						"width":"1px",      // 边框宽度
						"style":"solid",    // 边框样式
						// "radius":"50%"      // 边框圆角，支持百分比
					}
				},
				auditOrReim: {
					type: 'REIM',
					agreeOrRefused: 'AGREE'
				},
			}
		},
		onLoad(){
			this.user = this.$dry.get("user");
			this.reim_data = this.$dry.get("reim_data");
			if(this.reim_data.reimCertifyUrl != null && this.reim_data.reimCertifyUrl != '') {
				this.certify.push(this.reim_data.reimCertifyUrl);
			}
		},
		onShow(){
			this.getEmployee();
		},
		methods: {
			addImage(e){
				this.imageList = this.imageList.concat(e.paths);
				this.fileList = this.fileList.concat(e.files);
			},
			deleteImage(e){
				this.images.forEach(i => {
					if(i.url == e.currentImage){
						this.delId.push(i.id);
					}
				})
				for(let i = 0; i < this.imageList.length; i++){
					if(e.currentImage == this.imageList[i]){
						this.imageList.splice(i,1);
						i--;
					}
				}
				for(let j = 0; j < this.fileList.length; j++){
					if(e.currentImage == this.fileList[j].path){
						this.fileList.splice(j,1);
						j--;
					}
				}
			},
			getEmployee(){
				var token = this.$dry.getToken();
				if(token){
					var data = this.$request.run("getOneByTeam", token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"teamId": this.reim_data.teamId
						},
				    	success: data => {
							this.employee = data.data;
						}
					})
				}
			},
			getReimList(id) {
				var token = this.$dry.getToken();
				if(token) {
					var data = this.$request.run("queryReimById", token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {
							reimId: id
						},
						success: data => {
							if(data.code === 200) {
								this.reim_data.reimbursement = data.data;
							}
						}
					})
				}
			},
			audit(type){
				this.showDialog = true;
				this.auditOrReim.type = 'AUDIT';
				this.auditOrReim.agreeOrRefused = type;
			},
			clickCancel() {
				this.showDialog = false;
				this.auditOrReim.type = 'REIM';
			},
			clickConfirm() {
				this.showDialog = false;
				this.submit();
			},
			verify(){
				this.auditOrReim.type = 'REIM';
				this.showDialog = true;
				this.isEdit = true;
			},
			submit(){
				this.$refs['baseForm'].validate().then(async res => {
					var fileLists = [];
					if(this.auditOrReim.type == 'REIM') {
						if(this.fileList.length > 0) {
							fileLists = await this.$oss.saveImages(this.fileList);
						}
					}
					var token = this.$dry.getToken();
					if(token){
						uni.showToast({
							title: "正在提交",
							icon: "loading",
							duration: 1000
						});
						setTimeout(() => {
							if(this.auditOrReim.type == 'REIM') {
								if(fileLists.length > 0) {
									this.isClickUpload = true;
								}
								if(this.isEdit){
									this.reim_data.reimbursement.reimCertify = this.isClickUpload == true ? fileLists[0].id : this.order.reimCertify;
								}
							}
							var data = this.$request.run("auditReim", token);
							var auditOrReim = 'REIM';
							if(this.auditOrReim.type == 'AUDIT') {
								auditOrReim = 'AUDIT';
							}
							uni.request({
								url: data.url,
								method: data.method,
								header: data.header,
								data: {
									"reimbursement": this.reim_data.reimbursement,
									"auditOrReim": auditOrReim,
									"agreeOrRefuse": this.auditOrReim.agreeOrRefused
								},
								success: data => {
									if(data.code == 0) {
										uni.showToast({
											title: "成功"
										})
									}
									this.getReimList(this.reim_data.reimbursement.id);
								}
							})
						},2000);
					}
				})
			},
			
			
		}
	}
</script>

<style>
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}
	
	.slot-text {
		flex: 1;
		font-size: 14px;
		margin-right: 10px;
	}
	.image {
		width: 200rpx;
		height: 150rpx;
	}
	#img-box {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 50rpx;
	}
</style>
